<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            1.Vue对象的数据仓库中的变量
         -->
        <p>{{ name }}</p>
        <p>{{ age }}</p>
        <p>{{ flag }}</p>
        <p>{{ arr }}</p>
        <p>{{ user }}</p>
        <!-- null和undefined会以空字符串显示 -->
        <p>{{ sex }}</p>
        <p>{{ hobby }}</p>
        <!-- 当数据仓库中不存在指定变量时会报错 -->
        <!-- <p>{{ address }}</p> -->
        <hr>

        <!-- 
            2.简单的JS表达式
         -->
        <p>{{ age+1 }}</p>
        <p>{{ flag && age<18 }}</p>
        <p>{{ age>=18 ? '成年' : '未成年' }}</p>
        <p>{{ user.name }}</p>
        <p>{{ arr[0] }}</p>
        <!--  直接字义值（字面量） -->
        <p>{{ 'alice' }}</p>
        <p>{{ 66 }}</p>
        <p>{{ true }}</p>
        <p>{{ [1,2,3,4,5] }}</p>
        <p>{{ {username:'admin',password:'abc',age:25} }}</p>
        <hr>

        <!-- 
            3.JS内置对象
         -->
        <p>{{ new Date() }}</p>
        <p>{{ Math.random() }}</p>
        <p>{{ Math.ceil(2.5) }}</p>
        <p>{{ 3.1415926.toFixed(3) }}</p>
        <hr>

        <!-- 
            标签格式字符中的处理
                使用的不是innerText，而是textContent
         -->
        <div>{{ str }}</div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'tom',
            age:21,
            flag:true,
            arr:[12,4,34,65,3],
            user:{
                id:9527,
                name:'唐伯虎',
                age:20
            },
            sex:null,
            hobby:undefined,

            str:'<h3>wel\nco\tme</h3>'
        }
    })
</script>
</html>